<template>
  <div>
    <el-card>
      <div class="nav">
        <el-select v-model="value1" placeholder="选择会议室类型" @change="getListByQuery">
          <el-option
            v-for="item in kindList"
            :key="item.kind"
            :label="item.kind"
            :value="item.kind">
          </el-option>
        </el-select>

        <el-select v-model="value2" placeholder="选择会议室最小容量" @change="getListByQuery">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-row :gutter="20" class="row" >
        <el-col :span="3"  v-for="room in list" style="display: flex;margin: 60px" >
          <div @click="roomClick(room.id)">
            <el-card class="card" :style="{backgroundImage: 'url(' + room.cover + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
              <div style="text-align: center;">
                <el-row style="color: white">
                  <el-col>
                    <h1 >{{room.name}}</h1>
                  </el-col>
                  <el-col>
                    <span>容量{{ room.capacity }}</span>
                  </el-col>
                  <el-col>
                    <span >{{ room.describe1 }}</span>
                  </el-col>
                </el-row>
              </div>

            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import room from "~/api/room"
import kind from "~/api/kind"
export default {
  data(){
    return{
      list:[],//查询后的接口集合
      value1:null,
      value2:null,
      kindList:null,
      options2: [
        {
          value: 'null',
          label: '无'
        },{
          value: '80',
          label: '80'
        }, {
          value: '100',
          label: '100'
        }, {
          value: '150',
          label: '150'
        },
        {
          value: '200',
          label: '200'
        },
      ],
    }
  },
  created() {
    this.listAll()
    this.listKind()
  },
  methods:{
    listAll(){
      room.list()
        .then(response=>{
          this.list=response.data.data.list
        })
    },
    listKind() {
      kind.list()
        .then(response=>{
          this.kindList = response.data.data.list
        })
    },

    getListByQuery(){
      room.getQuery(this.value1,this.value2)
        .then(response=>{
          this.list=response.data.data.list
        })
    },

    roomClick(roomId){
      this.$router.push({ name: 'home-index-id' ,params:{id:roomId}})
    },

  }
}
</script>
